<template>
  <div class="admin">
    

    <table-pro :columns="columns" :requestApi="getAdminList">
      <template #role="{ row }">
      {{row.roles?.[0]?.name ?? "暂无"}}
    </template>
    <!-- 状态 -->
    <template #status="{ row }">
      <el-switch
      :modelValue="row.status"
      size="small"
      active-text="启用"
      inactive-text="禁用"
      >
    </el-switch>
    </template>
    <template #createdAt="{row}"> 
        {{dayjs(row.createdAt).format("YYYY-MM-DD HH:mm:ss")}}
      </template>
      <template #action="{ row }">
    <el-button type="primary" size="small">编辑</el-button>
    <el-button type="danger" size="small">删除</el-button>
</template>
    </table-pro>
  </div>
</template>

<script setup lang="ts">

import {getAdminList} from "@/API/admin"
import dayjs from "dayjs"



// 定义管理源页面中表格列的数据
const columns:ITableColumn[] = [
  { prop:"username",label:"用户名",fixed:"true"},
  { prop:"nickname",label:"昵称"},
  { prop:"phone",label:"手机号"},
  { prop:"role",label:"角色", type:"slot"},
  { prop:"status",label:"状态", type:"slot"},
  { prop:"createdAt",label:"创建时间",type:"slot",width:"240px"},
  {prop:"action",label:"操作",type:"slot",fixed:"right",width:"220px"},

]

</script>

<style lang="less" scoped>

</style>
